<template>
    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" router @open="handleOpen" @close="handleClose"
        :mode="mode" unique-opened>
        <MenuItem :menuList="props.menuList">
        </MenuItem>
    </el-menu>
</template> 
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import MenuItem from '@/components/sideMenu/menuItem.vue'
interface SidebarItem {
    path: string
    label: string
    children?: SidebarItem[]
}
const activeMenu = ref<string>('')

const props = withDefaults(defineProps<{
    menuList: Array<SidebarItem>,
    mode?: string,
}>(), {
    mode: 'vertical'
})

onMounted(() => {
    let href = location.pathname
    //包含特殊情况
    href.includes('article_status') && (href = '/article/article_status')
    activeMenu.value = href
})


const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>
<style scoped></style>